<%@ page import="java.util.Date"%>
<%@ page import="com.pochoF1.enums.Equipos"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<jsp:include page="head.jsp"></jsp:include>
<link rel="stylesheet" href="assets/css/compiled/index.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/compiled/gallery.css" type="text/css" media="screen" />
</head>
<body>
	<!-- navbar -->
	<header class="navbar navbar-inverse" role="banner">
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
				<span class="sr-only">Open Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="home"> <img src="assets/img/logo.png" alt="logo" />
			</a>
		</div>
	</header>
	<!-- end navbar -->
	<!-- sidebar -->
	<div id="sidebar-nav">
		<ul id="dashboard-menu">
			<li><a href="home"> <i class="icon-home"></i> <span>Home</span>
			</a></li>
			<li class="active">
				<div class="pointer">
					<div class="arrow"></div>
					<div class="arrow_border"></div>
				</div> <a href="showRaces"> <i class="icon-calendar"></i> <span>Race Details</span>
			</a>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
	<!-- main container -->
	<div class="content">
		<div id="pad-wrapper" class="gallery">
			<div class="row">
				<div class="col-md-12">
					<h4>Sessions Details</h4>
				</div>
			</div>
			<hr/>
			<div class="row">
				<form action="raceInfo" method="POST" id="raceInfoForm">
					<input type="hidden" name="session" id="session" />
					<div class="col-md-12">
						<c:choose>
							<c:when test="${raceYear ge 2013}">
								<span title="Click to see laps details - Practice 1" data-rel="tooltip" class="quick-button col-md-1" onclick="selectSession('FP1');"> 
									<i class="icon-info-sign"></i>
									<p>Practice 1</p> <span class="notification blue">Friday</span> 
								</span>
								
								<span title="Click to see laps details - Practice 2" data-rel="tooltip" class="quick-button col-md-1 col-md-offset-1" onclick="selectSession('FP2');"> 
									<i class="icon-info-sign"></i>
									<p>Practice 2</p> <span class="notification blue">Friday</span> 
								</span>
								
								<span title="Click to see laps details - Practice 3" data-rel="tooltip" class="quick-button col-md-1 col-md-offset-1" onclick="selectSession('FP3');"> 
									<i class="icon-info-sign"></i>
									<p>Practice 3</p> <span class="notification blue">Saturday</span> 
								</span>
								
								<span title="Click to see laps details - Qualy" data-rel="tooltip" class="quick-button col-md-1 col-md-offset-1" onclick="selectSession('QUALY');"> 
									<i class="icon-time"></i>
									<p>Qualy</p> <span class="notification green">Saturday</span> 
								</span>
								
								<span title="Click to see laps details - Race" data-rel="tooltip" class="quick-button col-md-1 col-md-offset-1" onclick="selectSession('RACE');"> 
									<i class="icon-road"></i>
									<p>Race</p> <span class="notification red">Sunday</span> 
								</span>
								
								<span title="Click to see results of the race" data-rel="tooltip" class="quick-button col-md-1 col-md-offset-1" onclick="selectSession('RESULTS');"> 
									<i class="icon-trophy"></i>
									<p>Results</p><span class="notification red">Sunday</span> 
								</span>
							</c:when>
							<c:otherwise>
								<span title="Click to see results of the race" data-rel="tooltip" class="quick-button col-md-2" onclick="selectSession('RESULTS');"> 
									<i class="icon-trophy"></i>
									<p>Results</p><span class="notification red">Sunday</span> 
								</span>
							</c:otherwise>
						</c:choose>
					</div>
				</form>
			</div>
			<br/>
			<br/>
			<div class="row">
				<div class="col-md-12">
					<h4>${raceName}</h4>
				</div>
			</div>
			<hr/>
			<c:choose>
				<c:when test="${raceYear ge 2013}">
					<div class="row text-center">
						<div class="col-md-12">
							<img class="img-responsive img-thumbnail" src="assets/img/Races/<c:out value='${fn:toLowerCase(raceName)}'/>.jpg" alt="${raceName}" title="${raceName}"/>
						</div>
					</div>
				</c:when>
			</c:choose>
			<br/>
			<div class="row text-center">
				<div class="col-md-12 col-md-offset-5">
					<span title="Back to previous page" data-rel="tooltip" class="quick-button col-md-1" onclick="history.back();" > 
						<i class="icon-chevron-left"></i>
						<p>Back</p>
					</span>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
            	<h3 class="modal-title">Loading</h3>
            </div>
            <div class="modal-body">
            	<div class="text-center">
					<h2>Please wait</h2>
				</div>
				<div class="text-center">
					<img alt="Loading" src="assets/img/ajax-loader.gif" width="45px" />
				</div>
            </div>
          </div>
        </div>
    </div>

	<!-- scripts -->
	<script src="assets/js/jquery-1.11.0.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
	<script src="assets/js/theme.js"></script>
	<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/js/functions.js"></script>
	<jsp:include page="analytics.jsp"></jsp:include>
</body>
</html>